<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="header::header"></head>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit"/>
    <meta name="renderer" content="ie-comp"/>
    <meta name="renderer" content="ie-stand"/>
    <title>普惠商城-个人中心-订单中心-线上订单-订单付款</title>
    <link rel="stylesheet" th:href="@{/css/personal-order-online-pay.css}">
    <style type="text/css">
        /*支付弹窗提示*/
        .pay_comfirm {
            width: 800px !important;
            height: 300px;
        }

        .pay_comfirm p {
            width: 500px;
            hight: auto;
            margin: 20px auto;

        }

        .pay_comfirm p:first-child {
            width: 780px;
            height: 50px;
            line-height: 50px;
            color: #fff;
            text-align: left;
            padding-left: 20px;
            font-size: 18px;
            background: #cd5041;
            margin-top: 0;
        }

        .confirm_txt {

            background: url(images/pay_comfirm_1.png) center left no-repeat;
            background-size: 70px 70px;
            padding-left: 80px;
            display: block;
            width: 300px;
            height: 100px;
            margin-left: 20px;
            font-size: 16px;
            line-height: 100px;
        }

        .successful, .failure {
            cursor: pointer;
            width: 200px;
            height: 50px;
            border-radius: 6px;
            border: none;
            font-size: 18px;

        }

        .successful {
            margin-right: 100px;

            background-color: chartreuse;
        }

        .failure {
            background-color: #cd5041;
        }
    </style>
</head>
<body>
<div th:include="commonfragment::order-top-search-nav"></div>
<!--个人中心中间主体框架  -->
<div class="centerbody personal_middle">
    <div class="centerbody personal_middle_main">
        <div class="pay_status">
            <p>订单已经提交成功，请尽快支付哦~</p>
            <p>共1个订单，订单号：<span th:text="${orderNo}"></span>查看 <a th:onclick="'toDetail(\''+${orderId}+'\',\''+*{deliveryType}+'\');'">订单详情</a>。</p>
            <p>应付金额：<span th:text="${'¥'+payMoney}"></span></p>
        </div>
        <!--  <div class="at_once_pay">
              <div class="pay_tit">立即支付</div>
              <div class="pay_choose">
                  <ul>
                      <li>
                          <div>
                              <input type="radio" name="choose_info" class="choose_info selected"><span class="choose_name">余额支付</span><span class="choose_num">可用余额：</span><span>¥100.00</span>
                          </div>
                      </li>
                      <li>
                          <div>
                              <input type="radio" name="choose_info" class="choose_info"><span class="choose_name">余额支付</span><span class="choose_num">可用积分：</span><span>10000</span>
                          </div>
                      </li>

                  </ul>
              </div>
              <div class="pay_pass">
                  <p>
                      <label for="pay_pass_pass">支付密码：</label>
                      <input type="password" class='pay_pass_pass' id="pay_pass_pass" placeholder="请输入六位数支付密码">
                      <a href="普惠商城-商城首页-登录页面-找回密码.html" class="pay_pass_forget">忘记密码？</a>
                  </p>
                  <p><input type="button" class="pay_pass_btn" value="立即支付"></p>
              </div>
          </div>-->
        <div class="third_party_pay">
            <div class="pay_tit">第三方支付</div>
            <div class="pay_third">
                <a href="#" class="third_btn unable">支付宝支付</a>
                <a href="#" class="third_btn unable">微信支付</a>
                <a target="_blank" onclick="yilian_pay()" class="third_btn">易联支付</a>
            </div>

        </div>

        <!-- 全部订单 -->

    </div>
    <div style="clear:both;"></div>
</div>

<!-- 页面底部 -->
<div th:include="footer::footer"></div>
<!--弹窗层-->
<div class="shadow"></div>
<div class="login_box_2 pay_comfirm" style="background: #fff;">
    <p>支付提示</p>
    <p class="confirm_txt">请您在新打开的支付页面进行支付，支付完成前请不要关闭窗口</p>
    <p><input type="button" class="successful" value="支付成功"><input type="button" class="failure" value="支付遇到问题"></p>
</div>
</body>
<script th:inline="javascript">
    function toDetail(orderId, deliveryType) {
        Common.generateAutoSubmitForm({
            url: "/shopping/order/getOrderDetail",
            data: {
                orderId: orderId,
                deliveryType: deliveryType
            }
        });
    }

    function yilian_pay() {
        Common.generateAutoSubmitForm({
            target: "_blank",
            url: "/pay/payeco",
            data: {
                amount: [[${payMoney}]],
                orderNum: [[${orderNo}]]
            }
        });
    }

    $(function () {
        $(".box1 input:checked").parent().parent().addClass("selected");
        $(".box1 input").change(function () {
            $(".box1 input:checked").parent().parent().addClass("selected").siblings().removeClass("selected");
        });
        $('input.paybutton').eq(0).addClass('choose');

        $('input.paybutton').hover(function () {
            $(this).addClass('choose');
            $(this).siblings().removeClass('choose');
        }, function () {
            $(this).removeClass('choose');
        });
        $('.cancel_small').click(function () {
            $('.shadow').css('display', 'none');
            $('.login_box_2').css('display', 'none');
        });

        $('.third_btn').click(function () {
            $('.shadow').css('display', 'block');
            $('.shadow').css('zIndex', '10000');
            $('.pay_comfirm').css('display', 'block');
            $('.pay_comfirm').css('zIndex', '10001');

        });

        $('.add_info').click(function () {
            $('.shadow').css('display', 'block');
            $('.login_box_2').css('display', 'block');
        });
        $('.shadow').css('height', $(window).height());
        $('.login_box_2').css('top', ($(window).height() - $('.login_box_2').height()) / 2);
        $('.login_box_2').css('left', ($(window).width() - $('.login_box_2').width()) / 2);
        $(window).resize(function () {
            $('.shadow').css('height', $(window).height());
            $('.login_box_2').css('top', ($(window).height() - $('.login_box_2').height()) / 2);
            $('.login_box_2').css('left', ($(window).width() - $('.login_box_2').width()) / 2);
        });
        $("#hear li").click(function () {
            $(this).css({
                borderBottom: "2px solid red",
                height: "43px"
            }).siblings().css({
                borderBottom: "none",
                height: "45px"
            });
        });

        $("#hear li").click(function () {
            $(this).addClass("action").siblings().removeClass("action");
            var index = $(this).index();
            $("#contentop li").eq(index).css("display", "block").siblings().css("display", "none");
        });

        $(".pay_comfirm").on("click", "input[type='button']", function () {
            window.location.href = "/shopping/order/findOnlineOrders";
        })
    });
</script>
}

</html>